{extend name="common/pop" /}

{block name="style"}
<style>
    body{
    }
    .layui-border{
        /*border:1px solid #000000;*/
        text-align: center;
        padding:15px 0;
    }
    .layui-border i {
        font-size:36px;
        display: inline-block;
    }
    .layui-border:hover{
        color: #ffffff;
        background-color:#2d2d2d;
    }
</style>
{/block}
{block name="content"}
<div class="layui-container" >
    <div class="layui-row" style="margin-top:15px;">
        {volist name="icon" id="vo"}
        <div class="layui-col-md4 layui-border layui-col-xs4 layui-element">
            <i class="layui-icon {$vo.2}" data-class="{$vo.2}"></i>
            <div class="doc-icon-code">{$vo.1}</div>
            <div class="doc-icon-name">{$vo.0}</div>
        </div>
        {/volist}
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['layer','jquery'],function(){
        var layer = layui.layer,
            $ = layui.jquery;
        $('.layui-element').click(function (){
            window.parent.handleIcon($(this).children('.doc-icon-code').text(),$(this).children('.layui-icon').attr('data-class'));
            // window.parent.document.getElementsByName('icon').value = $(this).children('.doc-icon-code').text();
            var mylay = parent.layer.getFrameIndex(window.name);
            parent.layer.close(mylay);
        })
    })

</script>
{/block}